<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人管理-联系人页</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div>
        <div class="zr_header">
            <div class="zr-center-box">
                <img src="img/logo.png" class="zr_logo"/>
                <ul class="zr_tab">
                    <li>我的问卷</li>
                    <li>高级检索</li>
                    <li>综合题库</li>
                    <li>用户管理</li>
                    <li>考察点管理</li>
                    <li class="zr_tab-border">联系人管理</li>
                    <li>帮助中心</li>
                </ul>
                <div class="zr_right-box">
                    <img class="zr_head-img" src="img/header.png"/>
                    <span>dnnfdsh</span>
                    <span>|</span>
                    <span>退出</span>
                </div>
            </div>
        </div>
        <div class="zr_fixed-box"></div>
        <!--<div class="zr_search-box zr_hidden zr_t1">-->
            <!--<form class="zr_search-form">-->
                <!--<div class="zr_til-form">联系人状态</div>-->
                <!--<div class="zr_rodios"><input type="radio" name="state"/>全部</div>-->
                <!--<div class="zr_rodios"><input type="radio" name="state"/>启用</div>-->
                <!--<div class="zr_rodios"><input type="radio" name="state"/>停用</div>-->
                <!--<div class="zr_ser">-->
                    <!--<input type="text" class="zr_search" placeholder="姓名/邮箱/联系电话/库名称"/>-->
                    <!--<img class="zr_ser-icon" src="img/seach.png"/>-->
                <!--</div>-->
            <!--</form>-->
        <!--</div>-->
        <!--<div class="zr_search-box zr_t3">-->
            <!--<form class="zr_search-form">-->
                <!--<div class="zr_ser">-->
                    <!--<input type="text" class="zr_search" placeholder="库名称"/>-->
                    <!--<img class="zr_ser-icon" src="img/seach.png"/>-->
                <!--</div>-->
            <!--</form>-->
        <!--</div>-->
        <div class="zr_nav">
            <div class="zr-center-box">
                <div class="zr_tabs1 zr_float-l">
                    <img class="zr_icion zr_hidden zr_t1" src="img/t1.jpg">
                    <img class="zr_icion zr_t3" src="img/t3.jpg">
                    <div class="zr_green-ionic zr_float-l">联系人库</div>
                </div>
                <div class="zr_bor zr_float-l">|</div>
                <div class="zr_tabs2 zr_float-l">
                    <img class="zr_icion zr_hidden zr_t2" src="img/t2.jpg">
                    <img class="zr_icion zr_t4" src="img/t4.jpg">
                    <div class="zr_float-l">联系人</div>
                </div>
                <div class="zr_float-r zr-mar-r zr_t3">
                    <div class="zr_ser">
                        <input type="text" class="zr_search" placeholder="请输入库名称搜索"/>
                        <img class="zr_ser-icon zr_pointer" src="img/seach.png"/>
                    </div>
                    <input class="zr_float-l zr-botton zr_pointer" type="button" value=" + 创建库" id="add-k"/>
                </div>
                <div class="zr_float-r zr-mar-r zr_hidden zr_t1">
                    <form class="zr_form zr_float-l">
                        <div class="zr_til-form">联系人状态</div>
                        <label class="zr_rodios"><input type="radio" name="state"/>全部</label>
                        <label class="zr_rodios"><input type="radio" name="state"/>启用</label>
                        <label class="zr_rodios"><input type="radio" name="state"/>停用</label>
                    </form>
                    <div class="zr_ser">
                        <input type="text" class="zr_search" placeholder="姓名/邮箱/联系电话/库名称"/>
                        <img class="zr_ser-icon zr_pointer" src="img/seach.png"/>
                    </div>
                    <input class="zr_float-l zr-botton zr_pointer zr_clear-btn" type="button" value=" 导入联系人"/>
                    <input class="zr_float-l zr-botton zr_pointer" type="button" value=" + 添加联系人" id="add"/>
                </div>
            </div>
        </div>
        <div class="zr_box1 zr-center-box">
            <!--<div class="zr_add">-->
                <!--<div class="zr_float-l zr_btn-add" id="add-k">创建库+</div>-->
            <!--</div>-->
            <div class="zr_common-box">
                <table>
                    <thead>
                    <tr>
                        <td class="w-20">
                            库名称
                        </td>
                        <td class="w-30">
                            联系人数量
                        </td>
                        <td class="w-30">
                            创建时间
                        </td>
                        <td class="w-20">
                            操作
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                            <!--<img src="img/change.jpg"/>-->
                            <!--<div class="zr_mouse-show">-->
                                <!--<div class="zr_update-p"><img src="img/update.png" class="zr_ionic-show"/>编辑</div>-->
                                <!--<div class="zr_add-k"><img src="img/person.png" class="zr_ionic-show"/>库内联系人</div>-->
                                <!--<div class="zr_add-p"><img src="img/ja.png" class="zr_ionic-show"/>添加新联系人</div>-->
                                <!--<div class="zr_del-p"><img src="img/ca.png" class="zr_ionic-show"/>删除库</div>-->
                            <!--</div>-->
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Addshah市场部文库
                        </td>
                        <td>
                            23
                        </td>
                        <td>
                            2017年11月27日16:13
                        </td>
                        <td class="zr_change">
                            <img src="img/icon.png" class="zr_ionic-show zr_pointer zr_update-p" title="编辑库"/>
                            <img src="img/icon2.png" class="zr_ionic-show zr_pointer zr_add-p" title="管理联系人"/>
                            <img src="img/icon1.png" class="zr_ionic-show zr_pointer zr_del-p" title="删除库"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <p class="zr_page">
                    <a href="javascript:;">
                        首页
                    </a>
                    <a href="javascript:;">
                        <<
                    </a>
                    <a class="zr-click" href="javascript:;">
                        1
                    </a>
                    <a href="javascript:;">
                        2
                    </a>
                    <a href="javascript:;">
                        3
                    </a>
                    <a href="javascript:;">
                        >>
                    </a>
                    <a href="javascript:;">
                        末页
                    </a>
                </p>
            </div>
        </div>
        <div class="zr_box2 zr_hidden zr-center-box">
            <div>
                <div class="zr_float-r zr_word zr_gt-push">联系人模板（下载）&gt;&gt;</div>
                <div class="zr_float-r zr_word">(说明：导入联系人时，请先下载“联系人模板”)</div>
            </div>
            <div class="zr_box">
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start zr_stop">停用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
                <div class="zr_item">
                    <div class="zr_bor-til">
                        <span class="zr_float-l zr_name">No.1</span>
                        <span class="zr_float-r zr_start">启用</span>
                    </div>
                    <div class="zr_item-news">
                        <p>王莽</p>
                        <p>电话：15668922222</p>
                        <p>邮箱：123@qq.com</p>
                        <p class="zr_over_hide">备注：临时电话使用邮箱为临时电话使用邮箱为</p>
                        <p>2017/01/23 13:22:36 创建</p>
                    </div>
                    <div class="zr_item-btn">
                        <span class="zr_float-r zr_del_d"><img class="zr_ionic-show" src="img/del.png"/>删除</span>
                        <span class="zr_float-r zr_update"><img class="zr_ionic-list" src="img/change.png"/>编辑</span>
                    </div>
                </div>
            </div>
            <p class="zr_page">
                <a href="javascript:;">
                    首页
                </a>
                <a href="javascript:;">
                    <<
                </a>
                <a class="zr-click" href="javascript:;">
                    1
                </a>
                <a href="javascript:;">
                    2
                </a>
                <a href="javascript:;">
                    3
                </a>
                <a href="javascript:;">
                    >>
                </a>
                <a href="javascript:;">
                    末页
                </a>
            </p>
        </div>
    </div>
    <div class="zr_pop" id="add-user">
        <div class="zr_center zr_center-box zr_center-maxBig">
            <h5 class="zr_til-pop">管理库内联系人-市场部</h5>
            <div style="overflow: hidden;">
                <div class="zr_float-l">
                    <div class="zr-table-box">
                        <div class="zr-box-top">
                            <div class="zr_float-l zr-til-span">已添加联系人</div>
                            <div class="zr_float-r zr-ser-input">
                                <input class="zr_float-l" type="text" placeholder="账号/昵称"/>
                                <img class="zr_float-l zr_ionic-seach" src="img/seach.png"/>
                            </div>
                        </div>
                        <div class="zr_common-box zr_com">
                            <table>
                                <thead>
                                <tr>
                                    <td class="w-10 zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="w-20 zr_text-left">
                                        序号
                                    </td>
                                    <td class="w-30 zr_text-left">
                                        成员昵称
                                    </td>
                                    <td class="w-40 zr_text-left">
                                        账号
                                    </td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="zr_word-mar">更新前<span class="zr_green-ionic"> 12 </span>人，更新后<span class="zr_green-ionic"> 20 </span>人</div>
                </div>
                <div class="zr_float-l" style="margin-top: 110px;">
                    <div class="zr-jt zr_pointer">&lt;</div>
                    <div class="zr-jt zr_pointer">&gt;</div>
                </div>
                <div class="zr_float-r">
                    <div class="zr-table-box">
                        <div class="zr-box-top">
                            <div class="zr_float-l zr-til-span">未添加联系人</div>
                            <div class="zr_float-r zr-ser-input">
                                <input class="zr_float-l" type="text" placeholder="账号/昵称"/>
                                <img class="zr_float-l zr_ionic-seach" src="img/seach.png"/>
                            </div>
                        </div>
                        <div class="zr_common-box zr_com">
                            <table>
                                <thead>
                                <tr>
                                    <td class="w-10 zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="w-20 zr_text-left">
                                        序号
                                    </td>
                                    <td class="w-30 zr_text-left">
                                        成员昵称
                                    </td>
                                    <td class="w-40 zr_text-left">
                                        账号
                                    </td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                <tr>
                                    <td class="zr_text-left">
                                        <input type="checkbox"/>
                                    </td>
                                    <td class="zr_text-left">
                                        01
                                    </td>
                                    <td class="zr_text-left">
                                        张三
                                    </td>
                                    <td class="zr_text-left">
                                        XD1236554
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="zr_word-mar">剩余<span class="zr_green-ionic"> 236 </span>人</div>
                </div>
            </div>
            <div class="zr-border-bottom"></div>
            <div class="zr-btns">
                <button class="zr_btn zr_btn1" id="ok">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="add-user-k">
        <div class="zr_center">
            <h5 class="zr_til-pop">创建联系人库</h5>
            <div class="zr_user-add">
                名称<input type="text" id="input-null"/><i class="zr_red">*</i>
                <p class="zr_error" id="error">该信息不能为空</p>
            </div>
            <div class="zr_user-add">
                状态
                <input class="zr_radios" type="radio"/>启用
               <input class="zr_radios" type="radio"/>停用
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1" id="affirm">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="update-user-k">
        <div class="zr_center">
            <h5 class="zr_til-pop">编辑联系人库</h5>
            <div class="zr_user-add">
                名称<input type="text"/>
            </div>
            <div class="zr_user-add">
                状态
                <input class="zr_radios" type="radio"/>启用
                <input class="zr_radios" type="radio"/>停用
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="del">
        <div class="zr_center">
            <h5 class="zr_til-pop">提示</h5>
           <div class="zr_del-word">
               <img src="img/wenhao.png" class="zr_ionic-w"/>
               确认删除？
           </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="succeed">
        <div class="zr_center">
            <h5 class="zr_til-pop">提示</h5>
            <div class="zr_del-word">
                <img src="img/duihao.png" class="zr_ionic-w"/>
                已成功添加8名联系人
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="add-user-person">
        <div class="zr_center zr_center-box">
            <h5 class="zr_til-pop">添加联系人</h5>
            <div class="zr_user-add zr_user-adds">
                <span>账号</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>姓名</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>性别</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>年龄</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>职业</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>邮箱</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>联系电话</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>备注</span><input type="text"/>
            </div>
            <div class="zr_user-add">
                <span>状态</span>
                <input class="zr_radios" type="radio"/>启用
                <input class="zr_radios" type="radio"/>停用
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="update-user-person">
        <div class="zr_center zr_center-box">
            <h5 class="zr_til-pop">编辑用户</h5>
            <div class="zr_user-add zr_user-adds">
                <span>账号</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>姓名</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>性别</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>年龄</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>职业</span><input type="text"/>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>邮箱</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>联系电话</span><input type="text"/><i class="zr_red">*</i>
            </div>
            <div class="zr_user-add zr_user-adds">
                <span>备注</span><input type="text"/>
            </div>
            <div class="zr_user-add">
                <span>状态</span>
                <input class="zr_radios" type="radio"/>启用
                <input class="zr_radios" type="radio"/>停用
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
    <div class="zr_pop" id="k-user">
        <div class="zr_center zr_center-box">
            <h5 class="zr_til-pop">库内联系人</h5>
            <div class="zr_user-add">
                库名称：危机管理库
            </div>
            <div class="zr_common-box zr_com">
                <table>
                    <thead>
                    <tr>
                        <td class="w-20">
                            序号
                        </td>
                        <td class="w-20">
                            成员昵称
                        </td>
                        <td class="w-40">
                            账号
                        </td>
                        <td class="w-20">
                            移除
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            01
                        </td>
                        <td>
                            张三
                        </td>
                        <td>
                           XD1236554
                        </td>
                        <td class="zr_del">
                            ×
                        </td>
                    </tr>
                    <tr>
                        <td>
                            02
                        </td>
                        <td>
                            张三
                        </td>
                        <td>
                            XD1236554
                        </td>
                        <td class="zr_del">
                            ×
                        </td>
                    </tr>
                    <tr>
                        <td>
                            03
                        </td>
                        <td>
                            张三
                        </td>
                        <td>
                            XD1236554
                        </td>
                        <td class="zr_del">
                            ×
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="zr_num">
                库内共计联系人<span>10</span>人
            </div>
            <div class="zr_user-add-btn">
                <button class="zr_btn zr_btn1">确认</button>
                <button  class="zr_btn zr_cancel">取消</button>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
    $('#add-k').click(function(){
        $('#add-user-k').show();
        $('body').css('overflowY','hidden');
    });
    $('.zr_add-p').click(function () {
        $('#add-user').show();
        $('.zr_mouse-show').hide();
        $('body').css('overflowY','hidden');
    });
    $('#add').click(function(){
        $('#add-user-person').show();
    });
    $('.zr_update-p').click(function () {
        $('#update-user-k').show();
        $('.zr_mouse-show').hide();
        $('body').css('overflowY','hidden');
    });
    $('.zr_del-p,.zr_del').click(function () {
        $('#del').show();
        $('#k-user').hide();
        $('.zr_mouse-show').hide();
        $('body').css('overflowY','hidden');
    });
    $('.zr_cancel').click(function () {
        $('.zr_pop').hide();
        $('body').css('overflowY','scroll');
    });
    $('.zr_del_d').click(function(){
        $('#del').show()
        $('body').css('overflowY','hidden');
    });
    $('.zr_update').click(function(){
        $('#update-user-person').show()
        $('body').css('overflowY','hidden');
    });
    $('.zr_tabs1').click(function(){
        $('.zr_box1').show();
        $('.zr_box2').hide();
        $(this).find('div').addClass('zr_green-ionic');
        $('.zr_tabs2').find('div').removeClass('zr_green-ionic');
        $('.zr_t1,.zr_t2').hide();
        $('.zr_t3,.zr_t4').show();
    });
    $('.zr_tabs2').click(function(){
        $('.zr_box2').show();
        $('.zr_box1').hide();
        $(this).find('div').addClass('zr_green-ionic');
        $('.zr_tabs1').find('div').removeClass('zr_green-ionic');
        $('.zr_t1,.zr_t2').show();
        $('.zr_t3,.zr_t4').hide();
    });
    $('.zr_add-k').click(function(){
        $('#k-user').show();
        $('body').css('overflowY','hidden');
    });
    $('#ok').click(function(){
        $('#succeed').show();
        $('#add-user').hide();
    });
    $('#affirm').click(function(){
        if($('#input-null').val()===''){
            $('#input-null').addClass('zr_border-red');
            $('#error').show();
        }
    });
    $('#input-null').on('keyup',function(){
        if($('#input-null').val()===''){
            $('#input-null').addClass('zr_border-red');
            $('#error').show();
        }else{
            $('#input-null').removeClass('zr_border-red');
            $('#error').hide();
        }
    });
</script>
</html>